<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<div id="main1" style="width: 600px;height:400px; margin-left:700px;margin-top: -400px"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var income;
    var expend;
    var num;
    function selectfinance2(){
        $.ajax({
            url:'/finance/selectIncome',
            type:"get",
            dataType:"json",
            success:function(data){
                    console.log(data.data);
                    income=data.data[0];
                num=data.data[1];
            }
        });
    };

    function selectfexpend0(){
        $.ajax({
            url:'/finance/selectExpend',
            type:'get',
            dataType:'json',
            success:function (data) {
                expend=data.data;
                console.log("收入"+expend);
                console.log("支出"+income);
                var myChart2 = echarts.init(document.getElementById('main2'));
                var option2 = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    aria: {
                        show: true
                    },
                    title: {
                        text: '公司盈利情况',
                        left: 'center'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['收入', '支出', '代付款']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            data: [
                                { value: expend, name: '收入'},
                                { value: income, name: '支出' },
                                { value: num, name: '代收款' },
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                myChart.setOption(option2);
            }
        });
    };
    /*收入*/
    var month=new Array();
    var money=new Array();
    function selectfinance(){
        $.ajax({
            url:'/finance/selectMonth',
            type:"get",
            dataType:"json",
            success:function(data){
                for(var i=0;i<data.data.length;i++){
                    month[i]=data.data[i]["MONTH(account_bak2)"];
                    money[i]=data.data[i]["SUM(account_total)"];
                }
                console.log("打印支出的"+money);
                console.log("打印月"+month);
            },
        });
    };
    /*支出*/
    var month1=new Array();
    var money1=new Array();
    var data1=[['product', '支出', '收入', '2020']] ;

    var data2=[];
    function selectfinance1(){
        $.ajax({
            url:'/finance/selectMonths',
            type:"get",
            dataType:"json",
            success:function(data){

                console.log(data.data);
                for(var i=0;i<data.data.length;i++){
                    month1[i]=data.data[i]["MONTH(account_bak2)"];
                    money1[i]=data.data[i]["SUM(account_total)"];
                }
                console.log("month[i]"+month[0]);
                for (var i=0;i<money1.length;i++){
                    data2[i]=[month[i]+'月',money[i],money1[i]]
                }
                console.log("长度"+data1.length);
                var a=1;
                for (var i=0;i<data2.length;i++){
                    data1[a++]=data2[i];
                }
                // 基于准备好的dom，初始化echarts实例
                var myChart1 = echarts.init(document.getElementById('main1'));
                var option= {
                    title: {
                        text: '壹装修收入支出统计'
                    },
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source: [
                        ]
                    },
                    xAxis: {type: 'category'},
                    yAxis: {},
                    // Declare several bar series, each will be mapped
                    // to a column of dataset.source by default.
                    series: [
                        {type: 'bar'},
                        {type: 'bar'},
                        {type: 'bar'}
                    ]
                };
                fetchData(function (data){
                    myChart1.setOption({
                        dataset: {
                            source: data1,
                        },
                    });
                });
                myChart1.setOption(option);
            },
        });
    };
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '工程盈利情况'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["一月","二月","三月","四月","五月","六月",]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [expend, expend, expend, 10, 10, 20]
        }]
    };
    function fetchData(cd) {
    //通过 setTimeout模拟异步加载
        setTimeout(function () {
            cd({
                income: income,
                data: expend
            });
        },1000);
    }

    window.onload = function(){
        selectfinance2();
        selectfinance();
        selectfexpend0();
        selectfinance1();
    }
    // 使用刚指定的配置项和数据显示图表。


 /*myChart2.setOption(option);*/
</script>
</body>
</html>